iT邦幫忙

2025 iThome 鐵人賽

DAY 4
1

嗨,各位鐵人夥伴! 👋

這是一篇專為新手設計的文章。如果你是經驗豐富的老手,可以跳過這篇,或者把它分享給你沒時間親自指導的新人,解放你的寶貴時間! 😉

本文會用最淺顯易懂的方式,簡單快速的說明 前端的與後端概要,讓完全沒有基礎的讀者也能輕鬆理解,但同時我也深入多解釋一些,不是只會單純跟你說前端是畫面後端是邏輯。


🤔 前端與後端,到底是什麼?

「前端」、「後端」、「前端工程師」、「後端工程師」... 這些詞彙你可能常常聽到,但總覺得似懂非懂?別擔心,今天就讓我用最白話的方式,一次為你解釋清楚!

核心概念:Client-Side vs. Server-Side

在深入之前,有個小提醒:我翻閱了許多資料,發現要給前端和後端一個「精準無爭議」的定義其實很難。但業界有一個廣泛的共識,主要圍繞著程式碼在哪裡運行:

💻 前端 (Frontend):關乎使用者介面 (UI) 和使用者體驗 (UX) 的一切。程式碼主要在 使用者設備 (Client-Side) 上運行(例如你的電腦瀏覽器、手機 App),負責呈現畫面、處理互動,並確保應用程式在各種裝置上都能順暢美觀。

⚙️ 後端 (Backend):關乎伺服器、資料和商業邏輯的一切。程式碼在 遠端主機 (Server-Side) 上運行,負責處理核心業務邏輯、與資料庫溝通、驗證使用者身份、確保系統安全,並提供前端所需的資料。
https://ithelp.ithome.com.tw/upload/images/20250808/20177987xfu0nyOtHr.png

💡 常見迷思:前端只負責畫面,沒有邏輯?

這是一個常見的誤解! 前端也包含複雜的邏輯。一個典型的例子是「即時搜尋與篩選」功能。當你在網頁上輸入文字時,前端程式碼會直接在你的瀏覽器中處理資料的過濾和排序,提供流暢無延遲的體驗。這就是跑在 Client-Side 的邏輯。

所以,區分前後端的關鍵,不在於「有沒有邏輯」,而在於「邏輯在哪裡執行」。

聽起來還是有點複雜?沒關係,我們先從了解各自的技術開始吧!

💻 前端極淺談:打造使用者眼前的世界

前端技術博大精深,這裡我們只做最概要的簡介,讓你快速建立基本概念。

我們以最常見的 Web 應用程式(也就是你用瀏覽器開的網頁或系統)為例。在這種情境下,前端的核心技術離不開三劍客:HTML, CSS, 和 JavaScript。

📜 HTML (HyperText Markup Language):網頁的骨架

HTML 負責定義網頁的 結構內容。它會告訴瀏覽器:「嘿,這裡有一個標題、一個段落和一個按鈕。」

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端互動範例</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>前端互動範例</h1>
    <p id="demoText">點擊下方按鈕,我會變!</p>
    <button id="myButton">點我!</button>
    <script src="script.js"></script>
  </body>
</html>

🎨 CSS (Cascading Style Sheets):網頁的化妝師

CSS 負責網頁的 外觀樣式。它決定了元素的長相,例如按鈕的顏色、文字的大小、區塊的間距等,讓頁面看起來更美觀。

/* style.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}
#demoText {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}
#myButton {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#myButton:hover {
  background-color: #0056b3;
}

🧠 JavaScript (JS):網頁的靈魂與大腦

JavaScript 負責處理 互動行為前端邏輯。它讓頁面「動起來」。例如,它定義了當按鈕被點擊時,要執行什麼操作。

// script.js
// 1. 找到 HTML 中的按鈕
const button = document.getElementById('myButton');
// 2. 找到 HTML 中的文字段落
const text = document.getElementById('demoText');

// 3. 設定按鈕的「事件監聽器」
// 意思是:當這個按鈕被「點擊 (click)」時,就執行後面的函數
button.addEventListener('click', function () {
  // 4. 按下按鈕後,會執行的邏輯:
  // 將文字的內容改為「你點擊了我!」
  text.textContent = '你點擊了我!';
});

從上面的例子可以看出,嚴格來說,HTML 和 CSS 算是「標記語言」,而 JavaScript 則是不折不扣的「程式語言」,能夠處理非常複雜的邏輯。

🛠️ 前端框架/函式庫又是什麼?

你可能聽過前端三大主流技術:React, Vue, Angular。這些工具(無論是框架或函式庫)都是基於 JavaScript 發展而來,它們的出現是為了解決日益複雜的前端需求,提升開發效率與維護品質。

你可以把它們想像成 開發懶人包:裡面預先寫好了許多常用功能和架構,讓工程師不必從零開始「造輪子」,可以更快地開發出穩定、高效的應用程式。

補充:無論使用哪種框架,經過 打包(Bundle)和編譯(Compile) 後,最終產生的仍然是瀏覽器唯一看得懂的 HTML, CSS, 和 JavaScript。

⚙️ 後端極淺談:支撐系統運作的幕後功臣

後端技術同樣博大精深。簡單來說,後端主要處理 業務邏輯 (Business Logic)

「業務邏輯」泛指系統運作的核心規則,例如:

  • 使用者登入時,如何驗證帳號密碼?
  • 使用者在論壇發文,資料該如何儲存?
  • 線上購物時,如何計算庫存和總金額?

這些都屬於後端的範疇。

🛡️ 為什麼需要後端?安全第一!

你可能會問:「既然前端的 JavaScript 也能處理邏輯,為什麼不直接讓前端把資料存進資料庫就好了?」

答案很簡單,但至關重要:安全性

前端的程式碼跑在用戶的設備上,這意味著它 可以被輕易地檢視和竄改。如果把重要的驗證邏輯(如檢查帳戶餘額)放在前端,駭客就能繞過檢查,為所欲為。

而後端程式碼跑在 受保護的伺服器 上,使用者無法直接接觸。因此,所有與 資料存取、權限驗證、交易處理 相關的核心邏輯,都必須放在後端,才能確保系統的穩定與安全。

後端還有一個重點在於,要去思考資料庫的資料怎麼存,怎麼操作,怎麼處理,也就是怎麼跟 DB 溝通?
你會覺得這簡單? 不? 資料的關聯可學識博大精深,甚至可以說很多後端工程師或架構師在討論需求的時候,腦袋裡都在想這資料怎麼存放
這需要提到資料正規劃(請看後續章節 Day 18: 🗺️ 設計的藍圖:ER Model, 主外鍵與索引 (Index))

🗃️ 後端語言與技術

後端的選擇非常多樣,在台灣的大型甲方企業級 Web 應用中,常見的後端語言有:

  • Java (Spring Boot)
  • C# (ASP.NET Core)
  • Python (Django, FastAPI)
  • JavaScript (Node.js)
  • Go

[!NOTE] > 聲明:不負責任且沒有要戰的淺淺討論

以下是針對「台灣大型甲方公司」的 Web Application 後端生態的個人觀察:

  1. JavaC# (ASP.NET Core):在企業級應用中佔有相當大的比重。這背後有許多歷史、生態系、找人難易度等因素,此處不深入避免引戰。
  2. Python, Go:近年來在新專案中的採用率有明顯提升的趨勢,在國外尤其如此。
  3. Javascript(Node.js):對你沒看錯,Javascript可以跑在Server,也可以拿寫後端,得益於Node.js(JavaScript runtime environment)。
  4. Python:除了 Web 開發,Python 在資料科學、數據工程、AI 領域幾乎處於主導地位,這也是它近年來如此熱門的原因。
  5. PHP:雖然在大型甲方公司的新案中較少見(可能與一些歷史資安印象有關),但其全球市佔率依然非常高,尤其在中小型網站、電商和內容管理系統(如 WordPress)領域,實力強勁。Respect!
  6. COBOL:在許多金融業的核心系統(特別是大型主機)中,依然扮演著關鍵角色。
  7. 其他語言:未被列出的語言不代表不重要,可能只是在上述特定場景較少見,或是我個人遺漏了。

小提醒:選擇哪種語言通常取決於公司策略、團隊技能、專案需求、生態系成熟度等多重因素。每種語言都有其優勢和適合的場景,沒有絕對的好壞之分。

🤝 前後端如何溝通?

最常見的方式是透過 API (Application Programming Interface)

API 是一種介面,它定義了前後端之間資料交換的規則與格式,讓不同系統能夠相互溝通。當前端需要資料或執行特定功能時,它會向後端發出 API 請求。後端處理完畢後,會將結果透過 API 回傳給前端。

關於 API 的詳細介紹,我們會在後續的文章 (Day 7: 🗣️ 溝通的語言:API, JSON, XML 與 RESTful) 中深入探討。

👥 專案中的相關職位

一個稍有規模的軟體專案,通常像一個團隊合作的電影劇組,各司其職。以下是一些常見的角色:

  • 👤 需求單位 (User/Stakeholder):系統的最終使用者或出資者,也就是「客戶」。他們提出系統需要「做什麼」。
  • 📋 專案經理 (PM - Product/Project Manager):專案的總舵手,負責協調資源、規劃時程,確保專案順利進行,是團隊與客戶之間的主要橋樑。
  • 🏛️ 系統分析師/架構師 (SA - System Analyst / Architect):系統的總設計師,從宏觀角度規劃整個系統的藍圖,包含技術選型、模組劃分、基礎建設等。
  • 🎨 UI/UX 設計師 (UI/UX Designer):使用者體驗的守護者。UI (User Interface) 設計師專注於畫面的美感與佈局;UX (User Experience) 設計師則專注於流程的順暢與易用性。他們通常會使用 Figma 等工具繪製設計稿。
  • 💻 前端工程師 (Frontend Engineer):將設計師的設計稿(UI)轉化為實際可互動的網頁介面,並實現前端的業務邏輯(UX)。
  • ⚙️ 後端工程師 (Backend Engineer):根據 SA 的設計和業務需求,打造系統核心功能、設計資料庫結構、並開發 API 供前端或其他系統使用。
  • 🐞 品保/測試工程師 (QA/QC - Quality Assurance/Control):品質的把關者。他們負責找出系統中的錯誤 (Bug),確保交付給客戶的產品穩定可靠。

💡 一點個人看法

  1. 一定要有這麼多角色嗎? 不一定。專案的規模和預算決定了團隊的組成。在小型團隊中,一個人可能身兼數職,例如「全端工程師」就同時負責前後端開發。
  2. 上述工作 一定都是不同人嗎? 保證不是,看預算規模,有的沒有預算且不太在乎 UIUX,可能會沒有 UIUX Design,有的內部用系統不保證一定要沒錯誤,可能不會有專職 QC 測試人員,兼任做很常見,這狀況很不應該嗎? 只能說回到預算跟規模跟公司重視程度,這裡不深論
  3. 需求單位一定是外部客戶嗎? 不一定。有時候系統是開發給公司內部其他 IT 團隊使用的,例如一個共用的簡訊發送平台,它的「客戶」就是其他需要發送簡訊的系統。

上一篇
Day3 | 🌐 系統的全貌:從使用者到資料庫 (AP/DB/網路/環境簡介)
下一篇
Day 5 | 🧬 架構的演進:從單體式到前後端分離
系列文
前輩沒空教?你的第一份甲方IT三十天自學指南11
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言